<template>
	<div class="container">
		<div class="form-content">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
				<el-row>
					<el-col :span="11">
						<el-form-item label="招聘地区" prop="regionId">
							<el-select v-model="ruleForm.regionId" placeholder="请选择招聘地区" style="width: 100%;">
								<el-option v-for="item in regionOptions" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="薪资范围" prop="salaryRangeId">
							<el-select v-model="ruleForm.salaryRangeId" placeholder="请选择薪酬范围" style="width: 100%;">
								<el-option v-for="item in salaryOptions" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="职位" prop="positionArr">
							<el-select v-model="ruleForm.positionArr" multiple clearable placeholder="请选择职位" style="width: 100%;">
								<el-option-group v-for="group in positionOptions" :key="group.id" :label="group.name">
									<el-option v-for="item in group.children" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-option-group>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="所属商家" prop="storeId">
							<el-input v-model="ruleForm.storeName" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="招聘标题" prop="title">
							<el-input v-model="ruleForm.title" placeholder="请输入招聘标题"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="招聘标签" prop="labelArr">
							<el-select v-model="ruleForm.labelArr" style="width: 100%;" multiple clearable filterable allow-create
							 default-first-option placeholder="请选择招聘标签">
								<el-option v-for="item in labelOptions" :key="item.id" :label="item.name" :value="item.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="具体薪酬范围" prop="salary">
							<el-input v-model="ruleForm.salary" placeholder="请输入具体薪酬范围"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="联系电话" prop="phone">
							<el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="生效日期" prop="startDate">
							<!-- <el-input v-model="ruleForm.startDate"></el-input> -->
							<el-date-picker v-model="ruleForm.startDate" type="date" placeholder="选择生效日期" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="截止日期" prop="endDate">
							<!-- <el-input v-model="ruleForm.endDate"></el-input> -->
							<el-date-picker v-model="ruleForm.endDate" type="date" placeholder="选择截止日期" style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="经度" prop="longitude">
							<el-input v-model="ruleForm.longitude" placeholder="请输入经度"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="纬度" prop="latitude">
							<el-input v-model="ruleForm.latitude" placeholder="请输入维度"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-form-item label="地址" prop="address">
						<el-input type="textarea" v-model="ruleForm.address" placeholder="请输入地址"></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="基本要求" prop="basicSituation">
						<quill-editor ref="myTextEditor" v-model="ruleForm.basicSituation" :options="editorOption"></quill-editor>
					</el-form-item>
				</el-row>
				<el-form-item label="图片 ">
					<!-- <el-upload class="avatar-uploader" list-type="picture-card" action="http://47.98.110.81:7009/file/uploadFile" -->
					<el-upload class="avatar-uploader" 
					list-type="picture-card" 
					action="http://192.168.2.95:7009/file/uploadFile"
					:file-list="workFileList"
					:on-preview="storeHandlePictureCardPreview" 
					:on-remove="storeHandleRemove" 
					:on-exceed="storeExceed" 
					:limit="8"
					:on-success="handleStoreSuccess"
					with-credentials>
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="storeVisible">
						<img width="100%" :src="storeImageUrl" alt="">
					</el-dialog>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
					<el-button @click="cancelBusiness">取消</el-button>
				</el-form-item>
			</el-form>
		</div>

	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor
	} from 'vue-quill-editor';
	export default {
		name: 'addEmploy',
		data() {
			return {
				workFileList:[],
				positionOptions: [], //职位
				labelOptions: [{
					id: 1,
					name: '五险一金'
				}, {
					id: 1,
					name: '上五休二'
				}, {
					id: 1,
					name: '朝九晚五'
				}, {
					id: 1,
					name: '朝九晚六'
				}, {
					id: 1,
					name: '三险一金'
				}, ], //招聘标签
				salaryOptions: [], //薪酬范围
				regionOptions: [], //地区
				editorOption: {
					placeholder: '请输入基本要求'
				},
				cardfileList: [],				
				workSituationfileList: [],
				cardImageUrl: '',
				cardVisible: false,
				storeVisible: false,
				storeImageUrl: '',
				workSituationImageUrl: '',
				workSituationVisible: false,
				ruleForm: {
					regionId: '',
					salaryRangeId: '',
					positionStr: '',
					positionArr: [],
					storeName: '',
					storeId: '',
					title: '',
					labelJson: '',
					labelArr: [],
					salary: '',
					basicSituation: '',
					phone: '',
					startDate: this.getNowFormatDate(),
					endDate: this.getoneYearFormatDate(),
					workSituation: '',
					latitude: '',
					longitude: '',
					address: '',
				},
				rules: {
					salaryRangeId: [{
						required: true,
						message: '请选择薪酬范围',
						trigger: 'change'
					}],
					positionArr: [{
						required: true,
						message: '请选择职位',
						trigger: 'change'
					}],
					storeId: [{
						required: true,
						message: '请输入商家名称',
						trigger: 'blur'
					}],
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}],
					labelArr: [{
						required: true,
						message: '请选择招聘标签',
						trigger: 'change'
					}],
					salary: [{
						required: true,
						message: '请输入具体薪酬范围',
						trigger: 'blur'
					}],
					basicSituation: [{
						required: true,
						message: '请输入基本要求',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择生效日期',
						trigger: 'change'
					}],
					endDate: [{
						required: true,
						message: '请选择截止日期',
						trigger: 'change'
					}],
					workSituation: [{
						required: true,
						message: '请选择图片',
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}],
					regionId: [{
						required: true,
						message: '请选择招聘地区',
						trigger: 'change'
					}],
					phone: [{
						required: true,
						message: '请输入商家手机号',
						trigger: 'blur'
					}],
					latitude: [{
						required: true,
						message: '请输入纬度',
						trigger: 'blur'
					}],
					longitude: [{
						required: true,
						message: '请输入经度',
						trigger: 'blur'
					}]
				},
			}
		},
		components: {
			quillEditor
		},
		watch: {},
		mounted() {
			let that = this;
			that.initStoreData();
			this.getSalary();
			this.getRegion();
			this.getPosition();
		},
		methods: {
			//取消
			cancelBusiness() {
				this.$router.go(-1)
			},
			initStoreData() {
				let route = this.$route.name;
				if (route === 'editEmploy') {
					this.getEmployDetail();
				} else {
					this.ruleForm.storeId = this.$route.params.id;
					this.ruleForm.storeName = this.$route.params.name;
				}
			},
			getEmployDetail() {
				let that = this;
				that.HttpUtil.encryptGet(
					that,
					that.Global.URLPATH.GETEMPLOYDETAIL, {
						id: that.$route.params.id
					},
					function(res) {
						if (res.status == 0) {
							that.ruleForm = res.data;
							that.ruleForm.positionArr = that.acTiveStringArrFun(that.ruleForm.positionStr);
							that.ruleForm.labelArr = that.acTiveStringArrFun(that.ruleForm.labelJson);
						}
					},
					function(err) {});
			},
			//获取当前时间
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			//获取一年后
			getoneYearFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear() + 1;
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
			//获取所有职位
			getPosition() {
				let that = this;
				that.HttpUtil.get(
					that,
					that.Global.URLPATH.GETPOSITION, {},
					function(res) {
						if (res.status == 0) {
							that.positionOptions = res.data
						}
					},
					function(err) {});
			},
			//获取薪酬范围
			getSalary() {
				let that = this;
				that.HttpUtil.get(that, that.Global.URLPATH.GETSALARYRANGE, {},
					function(res) {
						if (res.status == 0) {
							that.salaryOptions = res.data
						}
					},
					function(res) {
						console.log(res.msg)
					}
				)
			},
			//获取地区列表
			getRegion() {
				let that = this;
				that.HttpUtil.get(
					that,
					that.Global.URLPATH.GETREGION, {},
					function(res) {
						if (res.status == 0) {
							that.regionOptions = res.data
						}
					},
					function(err) {});
			},
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html;
			},
			//获取商户详情			
			getStoreDetail() {
				let that = this;
				that.HttpUtil.get(
					that,
					that.Global.URLPATH.GETSTOREDETAIL, {
						id: that.$route.params.id
					},
					function(res) {
						if (res.status == 0) {
							that.ruleForm = res.data;
							that.storeImageUrl = res.data.storeImg;
							that.storeImageUrl = res.data.cardNoImg;
						}
					},
					function(err) {});
			},
			//逗号字符串转数组
			acTiveStringArrFun(str) {
				var arr = [];
				arr = str.split(',');
				return arr;
			},
			//数组转逗号字符串
			acTiveArrStringFun(obj) {
				var arr = [];
				if (obj != null && obj.length != 0) {
					for (var i = 0; i < obj.length; i++) {
						arr.push(obj[i]);
					}
				}
				return arr.toString();
			},
			//submitForm
			submitForm(formName) {
				let that = this;
				that.$refs[formName].validate((valid) => {
					if (valid) {
						if (that.workFileList.length > 0) {														
							that.ruleForm.workSituation = that.workFileList.join(',');
						} else {
							that.$message.warning('请上传图片');
							return;
						}
						that.ruleForm.positionStr = that.acTiveArrStringFun(that.ruleForm.positionArr);
						delete that.ruleForm.positionArr;
						that.ruleForm.labelJson = that.acTiveArrStringFun(that.ruleForm.labelArr);
						delete that.ruleForm.labelArr;
						let route = this.$route.name;						
						if (route === 'editEmploy') {
							that.HttpUtil.put(
								that,
								that.Global.URLPATH.ADDEMPLOY + that.$route.params.id, that.ruleForm,
								function(res) {
									if (res.status == 0) {
										that.$message.success("修改成功");
										that.$router.push({
											name: 'business'
										});
									}
								},
								function(err) {});
						} else {
							that.HttpUtil.post(
								that,
								that.Global.URLPATH.ADDEMPLOY, that.ruleForm,
								function(res) {
									if (res.status == 0) {
										that.$message.success("新增成功");
										that.$router.push({
											name: 'business'
										});
									}
								},
								function(err) {});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//上传成功 			
			handleStoreSuccess(file, fileList) {
				if (file.status == 0) {
					this.workFileList.push(file.data);					
				}
			},
			//大图预览			
			storeHandlePictureCardPreview(file) {
				this.storeImageUrl = file.url;
				this.storeVisible = true;
			},
			//上传图片删除			
			storeHandleRemove(file, fileList) {},
			//上传图片超过限制			
			storeExceed(files, fileList) {
				this.$message.warning(`招聘图片最多上传8张`);
			},
		}
	}
</script>

<style>
	@import "../../../assets/css/common.css";

	.form-content {
		width: 800px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.el-upload--text {
		width: 180px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
